<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盾牌</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			background-color: skyblue;
		}
		div{
			width: 500px;
			margin:0 auto;
		}
		div img{
			transition: transform 1s;
		}
		.img1{
			-webkit-transform:translate(-500px,200px) rotate(45deg);
		}
		.img2{
			-webkit-transform:translate(-358px,230px) rotate(45deg);
		}
		.img3{
			-webkit-transform:translate(-400px,160px) rotate(45deg);
		}
		.img4{
			-webkit-transform:translate(300px,62px) rotate(45deg);
		}
		.img5{
			-webkit-transform:translate(456px,152px) rotate(45deg);
		}
		.img6{
			-webkit-transform:translate(-613px,123px) rotate(45deg);
		}
		.img7{
			-webkit-transform:translate(242px,130px) rotate(45deg);
		}
		.img8{
			-webkit-transform:translate(142px,90px) rotate(45deg);
		}
		.img9{
			-webkit-transform:translate(373px,187px) rotate(45deg);
		}
		html,body:hover div img{
			-webkit-transform: none;
		}
	</style>
</head>
<body>
	<div>
		<img class="img1" src="images/shield_1_01.png" alt="">
		<img class="img2" src="images/shield_1_02.png" alt="">
		<img class="img3" src="images/shield_1_03.png" alt="">
		<img class="img4" src="images/shield_1_04.png" alt="">
		<img class="img5" src="images/shield_1_05.png" alt="">
		<img class="img6" src="images/shield_1_06.png" alt="">
		<img class="img7" src="images/shield_1_07.png" alt="">
		<img class="img8" src="images/shield_1_08.png" alt="">
		<img class="img9" src="images/shield_1_09.png" alt="">
	</div>
</body>
</html>